
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Form, Input, Row, Col, Card, message } from 'antd';
import { connect } from 'dva';
import styles from './style.less';


const routes = [
    {
      path: '',
      breadcrumbName: 'Settings',
    },
    {
      path: '',
      breadcrumbName: 'Parameters',
    }
]

@connect(({ setupandsystem }) => ({
    setupandsystem
}))

class Management extends Component {
    state = {
        
    }
    
    // 
    componentDidMount () {
        this.initfetch()
    }

    initfetch = () => {
        const { dispatch, form } = this.props
        dispatch({
            type: 'setupandsystem/getNKN',
        }).then(res => {
            form.setFieldsValue({
                n: res.data.Value ? res.data.Value : ""
            })
        })
        dispatch({
            type: 'setupandsystem/getNKX',
        }).then(res => {
            form.setFieldsValue({
                x: res.data.Value ? res.data.Value : ""
            })
        })
        dispatch({
            type: 'setupandsystem/getReportTime',
        }).then(res => {
            form.setFieldsValue({
                time: res.data.Value ? res.data.Value : ""
            })
        })
        dispatch({
            type: 'setupandsystem/getMehPer',
        }).then(res => {
            form.setFieldsValue({
                chufa1: res.data.Value ? res.data.Value : ""
            })
        })
        dispatch({
            type: 'setupandsystem/getMehNum',
        }).then(res => {
            form.setFieldsValue({
                chufa2: res.data.Value ? res.data.Value : ""
            })
        })
    }

    cancelClcik = () => {
        const { form } = this.props
        form.resetFields()
    }

    confirmClcik = () => {
        const { form, dispatch } = this.props
        form.validateFields((err, values) => {
            if (err) { return}
            const { n, x, time, chufa1, chufa2 } = values
            dispatch({
                type: 'setupandsystem/putNKN',
                payload: n
            })
            dispatch({
                type: 'setupandsystem/putNKX',
                payload: x
            })
            dispatch({
                type: 'setupandsystem/putReportTime',
                payload: time
            })
            dispatch({
                type: 'setupandsystem/putMehPer',
                payload: chufa1
            })
            dispatch({
                type: 'setupandsystem/putMehNum',
                payload: chufa2
            })
            message.success('success')
        })
    }
    

    render () {
        const { form } = this.props
        const { getFieldDecorator } = form
        return (
            <PageHeaderWrapper title="Parameters" breadcrumb={{ routes }}>
                <Card className={styles.heard}>
                    Setup item
                </Card>
                <Card>
                    <div className={styles.content}> 
                        {/* <Row gutter={24}>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="NK计算变数 : N（2^[N/X]）" required={false}>
                                    {getFieldDecorator('n', {
                                        rules: [{ required: true, message: '请输入N的数值!' }],
                                    })(<Input placeholder="请输入N的数值" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="NK计算变数 : X（2^[N/X]）" required={false}>
                                    {getFieldDecorator('x', {
                                        rules: [{ required: true, message: '请输入X的数值!' }],
                                    })(<Input placeholder="请输入X的数值" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="报文时效时间（分）" required={false}>
                                    {getFieldDecorator('time', {
                                        rules: [{ required: true, message: '请输入报文时效时间!' }],
                                    })(<Input placeholder="请输入报文时效时间" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={24}>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="meshed触发值（%）" required={false}>
                                    {getFieldDecorator('chufa1', {
                                        rules: [{ required: true, message: '请输入meshed触发值!' }],
                                    })(<Input placeholder="请输入meshed触发值" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="meshed触发值（个）" required={false}>
                                    {getFieldDecorator('chufa2', {
                                        rules: [{ required: true, message: '请输入meshed触发值!' }],
                                    })(<Input placeholder="请输入meshed触发值" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                        </Row> */}
                        <Row gutter={24}>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="NK settings, B" required={false}>
                                    {getFieldDecorator('n', {
                                        rules: [{ required: true, message: 'Input value of B!' }],
                                    })(<Input placeholder="Input value of B" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="NK settings, X" required={false}>
                                    {getFieldDecorator('x', {
                                        rules: [{ required: true, message: 'Input value of X!' }],
                                    })(<Input placeholder="Input value of X" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="Rpt cache (m)" required={false}>
                                    {getFieldDecorator('time', {
                                        rules: [{ required: true, message: 'Input Rpt actvt date!' }],
                                    })(<Input placeholder="Input Rpt actvt date" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={24}>
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="Mesh def(%)" required={false}>
                                    {getFieldDecorator('chufa1', {
                                        rules: [{ required: true, message: 'Input Mesh def!' }],
                                    })(<Input placeholder="Input Mesh def" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                            
                            <Col span={8}>
                                <Form.Item className={styles.formItem} colon={false} label="Mesh def(#)" required={false}>
                                    {getFieldDecorator('chufa2', {
                                        rules: [{ required: true, message: 'Input Mesh def!' }],
                                    })(<Input placeholder="Input Mesh def" style={{ width: '80%' }} />)}
                                </Form.Item>
                            </Col>
                        </Row>
                    </div>

                </Card>
                <Card className={styles.footer}>
                    <div style={{display: 'flex'}}>
                        <Button 
                            className={styles.btn}
                            onClick={this.cancelClcik}
                        >
                            {/* 取消 */}
                            Cancel
                        </Button>
                        <div style={{position: 'relative'}}>
                            <Button
                                type="primary"
                                className={styles.btn}
                                onClick={this.confirmClcik}
                            >
                                {/* 提交 */}
                                Confirm
                            </Button>
                            {/* <IconFont type="icon-systemmenu" className={styles.icon}/> */}
                        </div>
                    </div>
                </Card>
            </PageHeaderWrapper>
        )

    }

}



// export default Management
export default Form.create()(Management)